<!--
 * @Author: long
 * @Date: 2021-08-03 18:02:21
 * @LastEditTime: 2021-11-10 15:50:09
 * @LastEditors: Please set LastEditors
 * @Description: In Resource List
 * @FilePath: \inventory-apie:\hjimi\人脸辨识云\html\gitlab\pc\faceCloudWebsite\src\views\face-recognition\resource-manage\resource-list\components\resourceModule.vue
-->
<style lang="scss" scoped>
.resource_module {
  .resource_table {
    padding: 15px 0 0px;
  }
}
</style>
<template>
  <div class="resource_module box_sm_style">
    <div class="resource_title table_tit_txt">{{ resourceData.resourceGroup }}</div>
    <div class="resource_table">
      <a-table
        class="table_sty"
        :columns="columns"
        :dataSource="resourceData.resourceLimitList"
        :pagination="pagination"
        :loading="loading"
        :rowKey="() => Math.random()"
       >
       <div slot="openState" slot-scope="text, row"><i :class="row.openState === '未开通' ? 'dot_default' : 'dot_success'"></i> <span class="pl5">{{ row.openState }}</span></div>
        <span slot="action" slot-scope="text, row" v-permission="['root']">
          <a class="theme_col" @click="goToRenew(text, resourceData.resourceGroupId)">{{ row.openState === '未开通' ? '立即购买' : '立即续费' }}</a>
          <!-- <a style="margin-left: 10px" href="javascript:;" @click="goToDetail">使用详情</a> -->
        </span>
      </a-table>
    </div>
  </div>
</template>
<script>
const data = [
  {
    key: 1,
    name: "John Brown",
    status: "已开通",
    remaining: "无限制",
    qps: "100"
  }
]
export default {
  props: {
    resourceData: {
      require: true,
      type: Object,
      default: []
    }
  },
  data() {
    return {
      data,
      columns: [
         { title: "接口名称", dataIndex: "resourceName", key: "resourceName", width: "15%" },
         { title: "状态", dataIndex: "openState", key: "openState", width: "25%", scopedSlots: { customRender: "openState" } },
         { title: "调用量剩余", dataIndex: "limitQuantity", key: "limitQuantity", width: "25%" },
         { title: "QPS限制", dataIndex: "limitQps", key: "limitQps", width: "15%" },
         { title: "操作", dataIndex: "", key: "x", width: "20%", scopedSlots: { customRender: "action" } },
       ],
      pagination: false,
      loading: true
     }
  },
  methods: {
    goToDetail() {
      this.$router.push("/face-recognition/usageDetails")
    },
    goToRenew(resourceIds, groupId) {
      console.log("🚀 ~ file: ResourceModule.vue ~ line 74 ~ goToRenew ~ resourceId, groupId", groupId)
      const { resourceId } = resourceIds
      this.$router.push({
        path: "resourcePay",
        query: {
          resourceId,
          groupId
        }
      })
    }
  },
  created() {
    console.log(this.resourceData)
    if(this.resourceData.length !== 0) {
      this.loading = false
    }
  }
}
</script>
